<template>
  <el-container class="order-container">
    <el-main>
      <el-row :gutter="10">
        <el-col :span="4"><img :src="userInfo.avatar||'@/assets/nopic.png'" alt="" width="100" height="100">
        </el-col>
        <el-col :span="6">
          <p>昵称：{{userInfo.nickname||'未设置'}}</p>
          <p>手机：{{userInfo.username}}</p>
          <p>用户ID:{{userInfo.userId}}</p>
        </el-col>
        <el-col :span="8">
          <p>用户来源：{{userInfo.registerChannelName}}</p>
          <p>注册时间：{{userInfo.createTime}}</p>
          <p>上次登陆时间：{{userInfo.lastLoginTime}}</p>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <h4>宝宝信息</h4>
        <table-view
          :templateDiv="{babySex:true}"
          :columns="babyTableContent"
          :pageList="babyInfo"
        >
          <template slot="babySex" slot-scope="scope">
            {{scope.row.babySex === 0?'女':'男'}}
          </template>
        </table-view>
      </el-row>
      <el-row :gutter="10">
        <h4>家庭成员</h4>
        <table-view
          :columns="familyTableContent"
          :pageList="familyInfo">
        </table-view>
      </el-row>
      <el-row :gutter="10">
        <h4>收货信息</h4>
        <table-view
          :templateDiv="{address:true}"
          :columns="addressTableContent"
          :pageList="addressInfo">
          <template slot="address" slot-scope="scope">
            <span v-if="scope.row.defaulted" style="border: 1px solid #409EFF;color: #409EFF">盒子配送地址</span>
            {{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.countyName}}{{scope.row.addressDetail}}
          </template>
        </table-view>
      </el-row>
      <el-row :gutter="10">
        <h4 class="fl">备注记录</h4>
        <el-button class="fr" size="mini" type="primary m-t-10" @click="addFollowBtn">添加备注</el-button>
        <table-view
          :columns="recordsTableContent"
          :pageList="userFollowRecords">
        </table-view>
      </el-row>
    </el-main>
    <el-footer></el-footer>

    <el-dialog title="备注" :visible.sync="dialogVisible" width="50%" :destroy-on-close="true">
      <el-form ref="form" :model="form" :rules="rule" label-width="100px" style="width: 85%">
        <el-form-item prop="record" label="备注:">
          <el-input v-model.trim="form.record" type="textarea" placeholder="请填写备注"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addFollow">提交</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  import TableView from '@/components/TableView'

  import * as pageApi from '@/api/user/userManage'


  export default {
    name: 'baseInfo',
    components: {
      TableView
    },
    data() {
      return {
        windowH: window.innerHeight - 100,
        userInfo: {},
        babyInfo: [],
        familyInfo: [],
        addressInfo: [],
        userFollowRecords: [],
        dialogVisible:false,
        form:{
          userId:'',
          record:''
        },
        babyTableContent: [
          {
            field: 'babyNickname',
            label: '宝宝昵称'
          }, {
            field: 'babySex',
            label: '性别'
          }, {
            field: 'busBabyBirth',
            label: '生日'
          },
        ],
        familyTableContent: [
          {
            field: 'familyUserNickname',
            label: '昵称'
          }, {
            field: 'relation',
            label: '与宝宝关系'
          }, {
            field: 'familyUserMobile',
            label: '手机号'
          },
        ],

        addressTableContent: [
          {
            field: 'receiver',
            label: '收货人'
          }, {
            field: 'mobile',
            label: '电话'
          }, {
            field: 'address',
            label: '配送地址'
          },
        ],
        recordsTableContent: [
          {
            field: 'record',
            label: '备注内容'
          }, {
            field: 'submitter',
            label: '提交人'
          }, {
            field: 'createTime',
            label: '提交时间'
          },
        ]
      }
    },
    filters: {},
    methods: {
      addFollowBtn(){
        this.form.userId = this.$route.query.id
        this.dialogVisible = true
      },
      addFollow(){
        pageApi.addFollow(this.form).then(res=>{
          this.handleMessage(res)
          this.getDetailById()
          if(res.code === '200'){
            this.dialogVisible= false
            this.getDetailById()
          }
        })
      },
      getDetailById() {
        let {id} = this.$route.query
        pageApi.getBaseInfoById(id).then(res => {
          let data = res.body
          this.userInfo = data.userInfo
          this.babyInfo = data.babyInfo
          this.familyInfo = data.familyInfo
          this.addressInfo = data.addressInfo
          this.userFollowRecords = data.userFollowRecords
        })
      }
    },
    mounted() {

      this.getDetailById()
    }
  }
</script>

<style lang="scss" scoped>
  .bottom-line-area .bottom-line:last-child {
    border: none;
  }

  .order-container {
    font-pageSize: 13px;
  }

  h4 {
    border-left: 1px solid #666;
    padding-left: 8px;
  }

  p {
    padding-left: 15px;
  }

  .order-statue {
    background: #ddd;
    padding: 8px;
  }

  .bottom-line {
    clear: both;
    border-bottom: 2px solid #666;
    padding-bottom: 10px;
    /*padding-top: 10px;*/
  }
</style>
